
<script setup>
	
	import port from './lib/port';
	import store from './lib/store';
	import useMp3 from './hook/useMp3';
	import useGroup from './hook/useGroup';
	import { onShow } from '@dcloudio/uni-app';
	import useCountdown from './hook/useCountdown';
	import c_paperitem from './components/paperitem.vue';
	import { computed, reactive, ref, watch, getCurrentInstance } from 'vue';


	/** mp3 */
	const mp3 = useMp3();
	
	/** 计算分组列表和标题 */
	const group = useGroup();

	/** 词汇相关共享数据 */
	const storeData = store();
	
	/** 倒计时 */
	const countdown = useCountdown();

	/** 分组列表 */
	const groupList = reactive(storeData.shearsBox.list);
	
	/** 分组索引 */
	const groupIndex = ref(storeData.shearsBox.index + 1);
	
	/** 列表 */
	const flowlist = ref([]);


	/** 上一次播放位置 */
	const lastIndex = ref(0);

	/** 播放结束 */
	const playEnd = () => {
		if (flowlist.value[lastIndex.value]) flowlist.value[lastIndex.value].play = false;
	};

	/** 监听自然结束 */
	uni.useAudio.onEnded(playEnd);

	/** 监听播放暂停 */
	uni.useAudio.onStop(playEnd);;


	/** 播放词汇 */
	const playEvent = (item, index) => {
		playEnd();
		lastIndex.value = index;
		item.play = true;
		uni.useAudio.src(item.voiceFile?.url);
		
		if (!item.playWord) {
			/** 首次点击 */
			item.playWord = true;
			item.blockTranslation = true;
			
		} else {
			/** 二次点击 */
			item.playWord = false;
			item.blockTranslation = false;
		};
	};

	/** 标题 */
	const valueTitle = ref('混组检测');
	
	/** 开始第二步 */
	function firstStepFun() {
		if (flowlist.value.length) return;
		playEnd();
		iterationStatus.value = 2;
		flowlist.value = [];
		flowlist.value = [...errorlist.value, ...correctlist.value, ...flowlist.value];
		errorlist.value = [];
		correctlist.value = [];
		totalNumber.value = flowlist.value.length;
	};

	/** 第几遍 */
	const iterationStatus = ref(1);

	/** 是否进入到结果页面 */
	const isresultStatus = ref(false);

	/** 下一步 */
	const showNext = ref(0);

	/** 重新检测 */
	function cancelEvent() {
		showNext.value = 1;
		iterationStatus.value = 2;
		isresultStatus.value = false;
		flowlist.value = [...errorlist.value, ...correctlist.value, ...flowlist.value];
		errorlist.value = [];
		correctlist.value = [];
		totalNumber.value = flowlist.value.length;
	};

	/** 加入选择的词汇 */
	function joinEvent(type, item, index) {
		if (type === 1 && iterationStatus.value === 1 && !item.joinCount) {
			item.joinCount = 1;
			item.playWord = false;
			playEvent(item, index);
			return;
		};
		
		playEnd();
		delete item.play;
		delete item.playWord;
		delete item.joinCount;
		delete item.blockTranslation;
		const list = [...flowlist.value];
		
		if (type === 1) {
			mp3.succeed();
			if (!correctlist.value.length || correctlist.value.indexOf(item.id) == -1) {
				list.splice(index, 1)
				correctlist.value.push(item);
			};
			
			/** 第二遍的话进入结果页面 */
			if(totalNumber.value === correctlist.value.length && iterationStatus.value === 2){
				/** 是否混合 */
				isresultStatus.value = true;
				if (groupList.length == 1) {
					if (mixGroup.value == 0) {
						showNext.value = 2;
						valueTitle.value = '全部混组';
						
					} else {
						showNext.value = 3;
					};
					
				} else {
					/** 1：下一组  2：混组检查  3：学后检测 */
					if (groupIndex.value == groupList.length) {
						switch(true) {
							case groupIndex.value == 5 && mixGroup.value == 2:
							case groupIndex.value == 6 && mixGroup.value == 3:
							case groupIndex.value == 7 && mixGroup.value == 4:
							case groupIndex.value == 8 && [4, 5].includes(mixGroup.value):
							case groupIndex.value == 9 && [5, 6].includes(mixGroup.value):
							case mixGroup.value == 0 || mixGroup.value == 1 || (mixGroup.value == mixTotalGroup.value - 1): {
								showNext.value = 2;
								break;
							}
							
							case mixGroup.value == mixTotalGroup.value: {
								showNext.value = 3;
								break;
							}
						};
						
						valueTitle.value = mixTotalGroup.value - 1 == mixGroup.value ? '全部混组' : '混组检测';
						
					} else if (groupIndex.value < groupList.length) {
						if (in_array(groupIndex.value, [2, 3, 5, 6, 8])) {
							switch(true) {
								case groupIndex.value == 2 && mixGroup.value == 1:
								case groupIndex.value == 6 && mixGroup.value == 5:
								case groupIndex.value == 3 && mixGroup.value == 2:
								case groupIndex.value == 8 && mixGroup.value == 6:
								case groupIndex.value == 5 && mixGroup.value == 3: {
									showNext.value = 1;
									break;
								}
								
								default:
								case groupIndex.value == 8 && [4, 5].includes(mixGroup.value): {
									showNext.value = 2;
									break;
								}
							};
							
							if (groupIndex.value == 6 && mixGroup.value == 4) {
								showNext.value = groupList.length >= 7 ? 2 : 1;
							};
							
						} else {
							showNext.value = 1;
						};
						
					} else {
						showNext.value = 1;
					};
				};
			};
			
		} else {
			mp3.mistake();
			if (!errorlist.value.length || errorlist.value.indexOf(item.id) == -1) {
				list.splice(index, 1);
				errorlist.value.push(item);
			};
		};
		
		flowlist.value = list;
	};

	
	/** 正确列表 */
	const correctlist = ref([]);
	
	/** 错误列表 */
	const errorlist = ref([]);
	
	/** 总数 */
	const totalNumber = ref(0);
	
	/** 初始化列表方法 */
	function initEvent(numbers) {
		flowlist.value = [];
		errorlist.value = [];
		correctlist.value = [];
		let result = [];
		numbers.forEach(index => {
			if (index >= 0 && index < groupList.length) {
				result = result.concat(groupList[index]);
			};
		});
		
		flowlist.value = result;
		totalNumber.value = flowlist.value.length;
	};

	/** 初始化列表 */
	initEvent([groupIndex.value - 1]);
	
	
	/** 加入正确的词汇 */
	function currentEvent() {
		playEnd();
		
		/** 如果是第二遍 */
		const newWords = flowlist.value.slice(0);
		correctlist.value.forEach((ele, index) => {
			newWords.push(ele)
		});
		
		flowlist.value = newWords;
		correctlist.value = [];
	};


	/** 加入错误的词汇 */
	function errorEvent(){
		playEnd();
		
		const newWords = flowlist.value.slice(0);
		errorlist.value.forEach((ele, index) => {
			newWords.push(ele);
		});
		
		flowlist.value = newWords;
		errorlist.value = [];
	};


	/** 是否混组 */
	const isMixStatus = ref(false);
	
	/** 混组列表 */
	const mixIndexs = ref([]);
	
	/** 下一组 */
	function nexGroupEvent(){
		playEnd();
		groupIndex.value++;
		storeData.setShearsBox('nextIndex', groupIndex.value - 1);
		uni.redirectTo({
			url: '/pages/course/word/mark'
		});
	};


	/** 最小分组总数 */
	const mixTotalGroup = ref(0);
	
	/** 获取最小分组方法 */
	function getMixTotalGroup() {
		switch(groupList.length){
			case 1:
			case 2: {
				mixTotalGroup.value = groupList.length;
				break; 
			}
				
			case 3:
			case 4: {
				mixTotalGroup.value = 3;
				break;
			}
				
			case 5:
			case 6:
			case 7:
			case 8:
			case 9: {
				mixTotalGroup.value = groupList.length - 1;
				break; 
			}        
		};
	};
	
	/** 获取最小分组 */
	getMixTotalGroup();

	
	/** 是否存在*/
	function in_array(search, array, flag = false) {
		for (const i in array) {
			if (flag === true && array[i] === search) {
				return true;
				
			} else if (array[i] == search) {
				return true;
			};
		};
		
		return false;
	};

	
	/** 最小分组 */
	const mixGroup = ref(storeData.shearsBox.mixGroup);
	
	/** 标题 */
	const cutboxTitle = ref('');
	
	/** 正确词汇列表 */
	const currentWords = ref([]);
	
	/** 当前的混组 */
	function mixGroupFn() {
		if (groupList.length == 1) {
			flowlist.value = groupList[0];
			cutboxTitle.value = '全部混组';
			mixGroup.value = 1;
			iterationStatus.value = 1;
			isresultStatus.value = false;
			errorlist.value = [];
			correctlist.value = [];
			
		} else {
			mixGroup.value++;
			
			/** 设置最小分组 */
			storeData.setShearsBox('mixGroup', mixGroup.value);
			let words = [];
			groupList.forEach((item, ele) => {
				if (ele <= groupIndex.value - 1) {
					item.forEach((item1, ele1) => {
						words.push(item1);
					});
				};
			});
			
			/** 计算分组列表和标题 */
			const result = group.calculate(groupList, in_array);
			cutboxTitle.value = result.title;
			if (result.words?.length) words = result.words;
			flowlist.value = words;
			iterationStatus.value = 1;
			isresultStatus.value = false;
			errorlist.value = [];
			correctlist.value = [];
		};
	};


	/** 学后检测 */
	function learnFinishEvent(){
		const words = [];
		if (groupIndex.value != groupList.length) {
			groupList.forEach((item, ele) => {
				if (ele <= groupIndex.value - 1) {
					item.forEach((item1, ele1) => {
						words.push(item1);
					});
				};
			});
			
		} else {
			groupList.forEach((item, ele) => {
				item.forEach((item1, ele1) => {
					words.push(item1);
				});
			});
		};
		
		
		/** 设置学习后的列表 */
		storeData.setlist('afterStudylist', words);
		uni.redirectTo({
			url: '/pages/course/word/after'
		});
	};
	
	
	/** 进入页面时 */
	onShow(() => {
		countdown.start(learnFinishEvent);
	});


</script>

<template>
	<view class="containerbox">
		<uv-navbar :title="'剪纸盒'" placeholder bg-color="#4d6d8a" left-icon-color="#fff" left-icon="" title-style="color:#fff"/>
		
		<view class="pl-30 text-30 py-15 text-white mb-20">{{ cutboxTitle || ('第' + groupIndex + '组') }} 第{{ iterationStatus }}遍</view>
		<template v-if="!isresultStatus">
			<scroll-view scroll-y class="containerbox px-30" @scrolltolower="getlistEvent">
				<c_paperitem
					color
					:item="item" 
					:index="index" 
					:key="item.id"
					:iteration="iterationStatus"
					v-for="item,index in flowlist"
					@play="playEvent(item, index)"
					@join="joinEvent($event,item,index)"
				/>
			</scroll-view>
			
			<view class="flex items-center justify-between bottombox">
				<view class="flex-1 flex justify-center" v-if="iterationStatus === 1">
					<view class="icon relative flex items-center justify-center" @tap="firstStepFun">
						<image class="wh-full" :src="`${$imageBaseUrl}course/cut_1.png`" />
						<view class="font">{{ correctlist.length }}</view>
					</view>
				</view>
				
				<template v-else>
					<view class="flex-1 flex justify-center">
						<view class="icon relative flex items-center justify-center" @tap="currentEvent">
							<image class="wh-full" :src="`${$imageBaseUrl}course/cut_1.png`" />
							<view class="font">{{ correctlist.length }}</view>
						</view>
					</view>
					
					<view class="flex-1 flex justify-center" v-if="iterationStatus === 2">
						<view class="icon relative flex items-center justify-center" @tap="errorEvent">
							<image class="wh-full" :src="`${$imageBaseUrl}course/cut_2.png`" />
							<view class="font">{{ errorlist.length }}</view>
						</view>
					</view>
				</template>
			</view>
		</template>
		
		<scroll-view class="containerbox" scroll-y="true" v-if="isresultStatus">
			<view class="items-center resultbox flex flex-col">
				<view @tap="cancelEvent">
					<view class="icon"><image class="wh-full" :src="`${$imageBaseUrl}course/cut1.png`" /></view>
					<view class="font">重新检查</view>
				</view>
				
				<view @tap="nexGroupEvent" v-if="showNext == 1">
					<view class="icon"><image class="wh-full" :src="`${$imageBaseUrl}course/cut2.png`" /></view>
					<view class="font">下一组</view>
				</view>
				
				<view @tap="mixGroupFn" v-if="showNext == 2">
					<view class="icon"><image class="wh-full" :src="`${$imageBaseUrl}course/cut4.png`" /></view>
					<view class="font">{{ valueTitle }}</view>
				</view>
				
				<view @tap="learnFinishEvent">
					<view class="icon"><image class="wh-full" :src="`${$imageBaseUrl}course/cut3.png`" /></view>
					<view class="font">学后检测</view>
				</view>
			</view>
		</scroll-view>
		
		<audio />
	</view>
</template>


<style lang="scss" scoped>
	@import "./style/common.scss";
	.bottombox .icon{width: 88rpx;height: 88rpx}
	.bottombox .font{border-radius: 100%;background-color: #fff;width: 55rpx;height: 55rpx;position: absolute;top: 22rpx;text-align: center;line-height: 55rpx}
	.resultbox{padding-top: 80rpx}
	.resultbox .font{font-size: 28rpx;text-align: center;margin-top: 20rpx;margin-bottom: 80rpx;color: #fff}
	.resultbox .icon{width: 260rpx;height: 192rpx}
</style>